<template>
  <div>
    <cus-search>
      <cus-search-item>
        <!-- <cusButton class="mr_10 mb_20" @onClick="getUserListApi" v-permission="10">查询</cusButton> -->
        <cusButton class="mr_10 mb_20" type="primary" @onClick="onAdd" v-permission="20">新增</cusButton>
      </cus-search-item>
    </cus-search>

    <cus-card title="用户列表" class="mt_20">
      <cusTable border :loading="form.loading" :columns="columns" :data="data" :size="vuex_config.tableSize" :bottomClass="['cus-page']"   :row-class-name="rowClassName">
        <template slot-scope="{ row,index }" slot="gmtCreate">
          {{row.gmtCreate | formatTime('yyyy-MM-dd hh-mm-ss')}}
        </template>
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button type="text" size="small"   :disabled="row.isAdmin == 1" v-permission="30"
              :style="{ color: row.isAdmin == 1 ? '#5f6368' : '#33a5fe' }" @onClick="onEdit(row)">
              编辑
            </cus-button>
            <cus-button
                type="text"
              :style="{ color: row.status ? '#ff4746' : '#1e6fff',padding: '2px'}"
              v-if="row.isAdmin != 1"
              size="small"
              v-permission="40"
              @onClick="onDelete(row)"
            >
              {{ row.status == 0 ? "启用" : "禁用" }}
            </cus-button>
            <cus-button
              type="text"
              v-if="row.status == 2"
              size="small"
              style="margin-right: 6px"
            >
              已交接
            </cus-button>
            <cus-button
              type="text"
              :style="{ color: '#1e6fff'}"
              v-else
              size="small"
              v-permission="40"
              @onClick="onHandle(row)"
              style="margin-right: 6px"
            >
              {{ row.isAdmin == 1 ? "交接" : "重置密码" }}
            </cus-button>
          </div>
        </template>
      </cusTable>
      <div style="width: 100%;display: flex;justify-content: flex-end">
        <cus-page :data="pages" class="mt_10" @pageChange="getUserListApi"></cus-page>
      </div>
    </cus-card>
    <userModal ref="userModal"></userModal>
    <handleModal ref="handleModal"></handleModal>
  </div>
</template>

<script>
  import {getUserList, deleteUser,modifyUserStatus} from '@/api/business/system'
  import userModal from "./components/userModal";
  import handleModal from "./components/handleModal.vue";
  export default {
    components: {userModal,handleModal},
    name: "userManage",
    data() {
      return {
        form: {
          loading: false,
        },
        getUserList: getUserList,
        pages: {
          page: 1,
          pageSize: 20,
          pageTotal: 0
        },
        data: [],
        columns: [
          {
            title: '名称',
            minWidth: 200,
            key: 'name',
            align: 'center',
          },
          {
            title: '账号',
            minWidth: 200,
            key: 'loginName',
            align: 'center',
          },
          {
            title: '备注',
            minWidth: 250,
            key: 'descr',
            align: 'center'
          },
          {
            title: '创建时间',
            minWidth: 200,
            slot: 'gmtCreate',
            align: 'center'
          },
          {
            title: '更新时间',
            minWidth: 200,
            slot: 'gmtCreate',
            align: 'center'
          },
          {
            title: '操作',
            width: 170,
            fixed: 'right',
            slot: 'operation',
            align: 'center'
          },
        ],
      }
    },
    mounted() {
      this.onInit();
    },
    methods: {
      onInit() {
        this.form.loading = true;
        this.getUserListApi().then(() => this.form.loading = false);
      },
      onAdd() {
        this.$refs['userModal'].show();
      },
      onEdit(row) {
        this.$refs['userModal'].form.id = row.id;
        this.$refs['userModal'].show();
      },
          // 交接或重置密码
    onHandle(row) {
      this.$refs["handleModal"].form.id = row.id;
      this.$refs["handleModal"].isAdmin = row.isAdmin;
      this.$refs["handleModal"].show();
    },
          // 禁用
    onDelete(row) {
      let contentA = row.status == 0 ? "确认启用当前账号" : "确认禁用当前账号";
      this.$cu
        .dialog({
          content: contentA,
        })
        .then(() => {
          row.status = row.status == 1 ? 0 : 1;
          this.getModifyUserStatus(row);
        });
    },
       // 判断禁用用户行的颜色
       rowClassName(row,index) {
       if (row.status == 'DISABLE') {
      	return 'table-select-row'
  } 
    },  
        // 改变用户状态
        getModifyUserStatus(row) {
      this.form.loading = true;
      return new Promise((resolve) => {
        modifyUserStatus({
          status: row.status,
          userId: row.id,
        }).then((res) => {
          if (res.code === 1) {
            this.form.loading = false;
            this.onInit()
            resolve();
          }
        });
      });
    },
      getUserListApi() {
        return new Promise(resolve => {
          getUserList({
            currentPage: this.pages.page,
            pageSize: this.pages.pageSize,
          }).then(res => {
            if (res.code === 1) {
              this.pages.pageTotal = res.data.total;
              this.data = res.data.list;
              resolve();
            }
          })
        })
      },
      // 删除按钮
      deleteUserApi(id) {
        return new Promise(resolve => {
          deleteUser({id}).then(res => {
            if (res.code === 1) {
              this.$cu.hideLoading();
              this.$Message.success('删除成功');
              this.getUserListApi();
              resolve();
            } else this.$cu.hideLoading(1.5)
          }).catch(() => this.$cu.hideLoading(1.5))
        })
      }
    }
  }
</script>

<style scoped>
::v-deep .table-select-row td {
  background-color: #f6f6f6 !important;
}
</style>
